{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.change_language"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_language_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-comments fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fa fa-lg fa-comments only-active"></i>
          {{tr "Change Language"}}
        </a>
        <div id="provision_update_language_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_language_form">
            <div class="row">
              <div class="large-12 columns">
                <select type="language" id="provision_new_language" class="provision-input">{{{languageOptions}}}</select>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12">{{tr "Update Language"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
  {{#isTabActionEnabled "settings-tab" "Settings.change_password"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_password_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x">
              <i class="fa fa-cloud fa-stack-2x"></i>
              <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fa fa-lg fa-lock only-active"></i>
          {{tr "Change Password"}}
        </a>
        <div id="provision_update_password_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_password_form">
            <div class="row">
              <div class="large-12 columns">
                <input type="password" id="provision_new_password" class="provision-input" placeholder="{{tr "New Password"}}"/>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <input type="password" id="provision_new_confirm_password" class="provision-input" placeholder="{{tr "Confirm Password"}}"/>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12">{{tr "Update Password"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
</div>
<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.change_view"}}
  <div class="medium-6 columns end">
    <dl class="accordion" data-accordion>
      <dd class="accordion-item" data-accordion-item>
        <a href="#provision_update_view_accordion" class="text-center accordion-title">
          <div class="text-center only-not-active">
            <span class="fa-stack fa-3x">
              <i class="fa fa-cloud fa-stack-2x"></i>
              <i class="fa fa-picture-o fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <br class="only-not-active">
          <i class="fa fa-lg fa-picture-o only-active"></i>
          {{tr "Change view"}}
        </a>
        <div id="provision_update_view_accordion" class="accordion-content" data-tab-content>
          <br>
          <form id="provision_change_view_form">
            <div class="row">
              <div class="large-12 columns">
                <select id="provision_user_views_select" class="provision-input"></select>
              </div>
            </div>
            <div class="row">
              <div class="large-12 columns">
                <button href"#" type="submit" class="button large radius large-12 small-12">{{tr "Update view"}}</button>
              </div>
            </div>
          </form>
        </div>
      </dd>
    </dl>
  </div>
  {{/isTabActionEnabled}}
  {{#isTabActionEnabled "settings-tab" "Settings.ssh_key"}}
  <div class="medium-6 columns end">
    <form id="provision_add_ssh_key_form">
      <div class="row">
        <div class="large-12 large-centered columns">
          <dl class="accordion" data-accordion>
            <dd class="accordion-item" data-accordion-item>
              <a href="#provision_add_ssh_key_accordion" class="text-center accordion-title">
                <div class="text-center only-not-active">
                  <span class="fa-stack fa-3x">
                    <i class="fa fa-cloud fa-stack-2x"></i>
                    <i class="fa fa-key fa-stack-1x fa-inverse"></i>
                  </span>
                </div>
                <br class="only-not-active">
                <i class="fa fa-key fa-lg only-active"></i>
                <span class="provision_add_ssh_key_button">{{tr "Add SSH Key"}}</span>
                <span class="provision_update_ssh_key_button">{{tr "Update SSH Key"}}</span>
              </a>
              <div id="provision_add_ssh_key_accordion" class="accordion-content" data-tab-content>
                <br>
                <p>
                  <span class="provision_add_ssh_key_button">
                    {{tr "Add a public SSH key to your account!"}}
                    <br>
                    {{tr "You will be able to access your Virtual Machines without password"}}
                  </span>
                  <span class="provision_update_ssh_key_button">
                    {{tr "Update your public SSH key!"}}
                    <br>
                    {{tr "You will be able to access your Virtual Machines without password"}}
                  </span>
                </p>
                <div class="row">
                  <div class="large-12 large-centered columns">
                    <textarea id="provision_ssh_key" placeholder="SSH key" class="provision-input"></textarea>
                  </div>
                </div>
                <div class="row">
                  <div class="large-12 large-centered columns">
                    <button href="#" type="submit" class="provision_add_ssh_key_button button large radius large-12 small-12">{{tr "Add SSH Key"}}</button>
                    <button href="#" type="submit" class="provision_update_ssh_key_button button large radius large-12 small-12" hidden>{{tr "Update SSH Key"}}</button>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </form>
  </div>
  {{/isTabActionEnabled}}
</div>
<div class="row">
  {{#isTabActionEnabled "settings-tab" "Settings.login_token"}}
  <div class="medium-6 columns end">
    <div class="row">
      <div class="large-12 large-centered columns">
        <dl class="accordion" data-accordion>
          <dd class="accordion-item" data-accordion-item>
            <a href="#provision_login_token_accordion" class="text-center accordion-title">
              <div class="text-center only-not-active">
                <span class="fa-stack fa-3x">
                  <i class="fa fa-cloud fa-stack-2x"></i>
                  <i class="fa fa-unlock-alt fa-stack-1x fa-inverse"></i>
                </span>
              </div>
              <br class="only-not-active">
              <i class="fa fa-lg fa-unlock-alt only-active"></i>
              {{tr "Login Token"}}
            </a>
            <div id="provision_login_token_accordion" class="accordion-content" data-tab-content>
              <br/>
              <p>
                {{tr "A login token acts as a password and can be used to authenticate with OpenNebula through Sunstone, the CLI, or the API"}}
              </p>
              <div class="row">
                <div class="large-12 columns">
                  <button href"#" type="submit" class="button large radius large-12 small-12 provision_login_token_button">{{tr "Manage login tokens"}}</button>
                </div>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  {{/isTabActionEnabled}}
</div>